<template>
<!--  <div class="container">-->
<!--    <div>-->
<!--      <div style="width: 100%; margin: 0 auto">-->
<!--        <div class="bg">-->
<!--          <div style="width: 100%">-->
<!--             <div class="titleName">国标外文版</div>-->
<!--            <el-row>-->
<!--              <el-col :span="5">-->
<!--                <el-form>-->
<!--                  <el-form-item label="项目状态">-->
<!--                    <el-select-->
<!--                      v-model="value2"-->
<!--                      value-key="value2"-->
<!--                      collapse-tags-->
<!--                      @change="rowStateItem"-->
<!--                      style="margin-left: 20px;"-->
<!--                      placeholder="请选择">-->
<!--                      <el-option-->
<!--                        v-for="(item,index) in statesXM"-->
<!--                        :key="item"-->
<!--                        :label="item"-->
<!--                        :value="item">-->
<!--                      </el-option>-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </el-col>-->
<!--              <el-col :span="19">-->
<!--                <el-input-->
<!--                  placeholder="请输入项目中文名称"-->
<!--                  style="width: 300px; margin-right: 30px"-->
<!--                  v-model="queryParams.keyWord"-->
<!--                  @keyup.enter.native="getList"-->
<!--                  clearable-->
<!--                >-->
<!--                </el-input>-->
<!--                <el-button type="primary" @click="getList()"> 查询 </el-button>-->
<!--                <el-button-->
<!--                  type="warning"-->
<!--                  plain-->
<!--                  icon="el-icon-download"-->
<!--                  :loading="exportLoading"-->
<!--                  @click="handleExport"-->
<!--                >导出</el-button>-->
<!--                <el-button-->
<!--                  type="warning"-->
<!--                  plain-->
<!--                  :loading="exportLoading"-->
<!--                  @click="talcta"-->
<!--                >数据来源</el-button>-->
<!--              </el-col>-->

<!--            </el-row>-->
<!--&lt;!&ndash;            <el-row class="rowState">&ndash;&gt;-->
<!--&lt;!&ndash;              <div>项目状态:</div>&ndash;&gt;-->
<!--&lt;!&ndash;              <ul class="rowStateItem">&ndash;&gt;-->
<!--&lt;!&ndash;                <li&ndash;&gt;-->
<!--&lt;!&ndash;                  v-for="(item, index) in statesXM"&ndash;&gt;-->
<!--&lt;!&ndash;                  :class="active == index ? 'activeColorActive' : 'activeColor'"&ndash;&gt;-->
<!--&lt;!&ndash;                  @click="rowStateItem(item, index)"&ndash;&gt;-->
<!--&lt;!&ndash;                >&ndash;&gt;-->
<!--&lt;!&ndash;                  {{ item }}&ndash;&gt;-->
<!--&lt;!&ndash;                </li>&ndash;&gt;-->
<!--&lt;!&ndash;              </ul>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-row>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->

<!--        <el-table :data="list"   align="center" style="margin:0 auto" height="600">-->
<!--          <el-table-column fixed prop="id" label="#" width="100">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            fixed-->
<!--            prop="c_GB_CODE"-->
<!--            align="center"-->
<!--            label="标准号"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              <a @click="detail(scope.row.ids)">-->
<!--                {{ scope.row.c_GB_CODE }}-->
<!--              </a>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="c_C_NAME" :show-overflow-tooltip="true" align="center" label="项目中文名称">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="LANGUAGE"-->
<!--            label="语种"-->
<!--            align="center"-->
<!--            class="name-wrapper"-->
<!--          >-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="STATE" align="center" label="项目状态">-->
<!--            <template slot-scope="scope">-->
<!--              <el-popover trigger="hover" placement="top">-->
<!--                <p>{{ scope.row.STATE}}</p>-->
<!--                <div slot="reference" class="name-wrapper">-->
<!--                  <el-tag size="medium">{{ scope.row.STATE}}</el-tag>-->
<!--                </div>-->
<!--              </el-popover>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--           <el-table-column prop="PLAN_ISSUE_DATE" align="center" label="发布日期">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        <div style="margin: 0 auto">-->
<!--          <pagination-->
<!--            v-show="total > 0"-->
<!--            :total="total"-->
<!--            :page.sync="queryParams.current"-->
<!--            :limit.sync="queryParams.size"-->
<!--            @pagination="getList"-->
<!--            :page-sizes="[12, 20, 30, 40]"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box">
        <el-form>
          <el-col :span="5">
                              <el-form-item label="项目状态">
                                <el-select
                                  v-model="value2"
                                  value-key="value2"
                                  collapse-tags
                                  @change="rowStateItem"
                                  style="margin-left: 20px;"
                                  placeholder="请选择">
                                  <el-option
                                    v-for="(item,index) in statesXM"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                  </el-option>
                                </el-select>
                              </el-form-item>

          </el-col>
          <el-col :span="5">
            <el-form-item label="">
              <el-input
                placeholder="请输入项目中文名称"
                style="width: 300px; margin-right: 30px"
                v-model="queryParams.keyWord"
                @keyup.enter.native="getList"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <!--                  <el-input-->
            <!--                    placeholder="请输入标准中文名称"-->
            <!--                    style="width: 300px; margin-right: 30px"-->
            <!--                    v-model="keyWord"-->
            <!--                    @keyup.enter.native="getList"-->
            <!--                    clearable-->
            <!--                  >-->
            <!--                  </el-input>-->
            <el-button type="primary" @click="getList()"> 查询 </el-button>
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    :loading="exportLoading"
                    @click="handleExport"
                  >导出</el-button>
                  <el-button
                    type="warning"
                    plain
                    :loading="exportLoading"
                    @click="talcta"
                  >数据来源</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
          <el-table :data="list" :row-style="{height:'56px'}">
            <el-table-column fixed prop="id" label="#" width="100">
            </el-table-column>
            <el-table-column
              fixed
              prop="c_GB_CODE"
              align="center"
              label="标准号"
            >
              <template slot-scope="scope">
                <a @click="detail(scope.row.ids)">
                  {{ scope.row.c_GB_CODE }}
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="c_C_NAME" :show-overflow-tooltip="true" align="center" label="项目中文名称">
            </el-table-column>
            <el-table-column
              prop="LANGUAGE"
              label="语种"
              align="center"
              class="name-wrapper"
            >
            </el-table-column>
            <el-table-column prop="STATE" align="center" label="项目状态">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.STATE}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.STATE}}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="PLAN_ISSUE_DATE" align="center" label="发布日期">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10, 20, 30, 40]"
            class="pagination-container"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTableThree,nsfPoiDownload } from "@/api/monitor/getTableList";
export default {
  name: "index",
  data() {
    return {
      exportLoading: false,
      list: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        keyWord: "",
        status:'',
      },
      statesXM: [
        "正在翻译",
        "正在审查",
        "正在批准",
        "已发布标准",
      ],
      active: 3,
        value2:'已发布标准',
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getTableThree(this.queryParams).then((response) => {
        this.list = response.data;
        this.total = response.total;
        this.$modal.closeLoading();
      });
    },
     handleExport (){
          nsfPoiDownload(this.queryParams).then((res) => {
            console.log(res,'res')
            const link = document.createElement('a')
            let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            // link.download = res.headers['content-disposition'] //下载后文件名
            // var fileName = localStorage.getItem('disposition')
            link.download = res.fileName || '国家标准外文版' //下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }).catch(error => {
            console.log(error)
          })
          // this.$modal.confirm("daochu").then(()=>{
          //   this.exportLoading = true;
          //   return poiDownload(this.queryParams)
          // }).then(res=>{
          //      this.$download.name(res);
          //      this.exportLoading = false;
          // })
    },
    talcta(){
       var http = 'https://std.samr.gov.cn/gfs/query';
      //  window.location.href=http;
       window.open(http,'_blank')
    },
    fmtLength(row, column) {
      if (row.STD_FORM == "X") {
        return "修订";
      }
      if (row.STD_FORM == "Z") {
        return "制订";
      }
    },
    detail(data) {
      location.href = "http://std.samr.gov.cn/gfs/search/gfsDetailed?id=" + data;
    },
    rowStateItem() {
      // this.active = index;
      if(this.value2=='已发布标准'){
           this.queryParams.status='已发布'
      }else{
          this.queryParams.status = this.value2;
      }
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;

      .JNPF-common-search-box {
        background: #fff;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        padding: 15px 21px 0;
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:24px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
.titleName{
  text-align: center;
  font-size: 23px;
  padding: 20px 0;
  font-weight:600;
}
.rowState {
  display: flex;
  height: 48px;
  line-height: 48px;
  background: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  .rowStateItem {
    display: flex;
    align-items: center;
  }
}
.activeColor {
  // width: 142px;
  height: 34px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #59709d;
  padding: 0 20px;
}
.activeColorActive {
  background: #3d78fc;
  border-radius: 12px;
  // width: 142px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
::v-deep .el-pagination{
  right:100px;
}
</style>

